<template>
  <div v-page-show="{ show: !operate.checkedProject, text: `选择全部项目时查看` }">
    <statiscsecharts v-auth="'business.inspect.statistic.all'"></statiscsecharts>
    <div v-auth="'business.inspect.statistic.project'"
      class="bg-[#fff] rounded-[4px] dark:bg-[var(--bg-2)] py-[24px] mt-[16px]">
      <div class="px-[16px]" :style="{
    fontSize: 'var(--font-size-2)',
    lineHeight: 'var(--font-size-2)'
  }">
        各项目情况
      </div>
      <div class="px-[16px]">
        <pure-table class="mt-[16px]" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)"
          showOverflowTooltip border @selection-change="selectionChange" :isShowPag="false">
          <template #id="scoped">
            <span>{{ isNullOrEmpty(scoped.$index + 1) }}</span>
          </template>
        </pure-table>
      </div>
    </div>
    <!-- <div class="bg-[var(--bg-2)] mt-[20px]">
      <pieChart></pieChart>
    </div>
    <div class="py-[10px] cursor-pointer" @click="centerDialogVisible = true">
      地图
    </div>
    <mapmark v-model="centerDialogVisible"></mapmark> -->
  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import pieChart from "./echarts/demo.vue";
import mapmark from "./echarts/mapmark.vue";
const centerDialogVisible = ref(false);
import RePage from "@/components/RePage/index.vue";
import { PAGE_LAYOUT } from "@/constant";
import { debounce } from "@pureadmin/utils";
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
const operate = usePageVariablesStoreHook().getOperate()
import { getList } from "@/api/operate/daily-inspection/Inspection-statistics";
import statiscsecharts from "./statiscs-echarts.vue";
const tableData = reactive({
  data: [],
  total: 0
});
const titles = {
  id: "编号", // id
  projectName: "所属项目", // projectName
  inspectWait: "待巡检任务", // missionName
  inspectTotal: "累计巡检次数", // missionStatus
  inspectNormal: "巡检正常次数", // cycleValue
  inspectErro: "巡检异常次数" // finishDate
};
const defaultSearchForm = () => {
  return {
    page: 1,
    limit: 10
  };
};
const searchFrom = ref(defaultSearchForm());

const selectionData = ref([]);
const roleTableConfig = [
  { slot: "id", label: titles.id, width: 100, fixed: 'left' },
  { prop: "unityName", label: "所属单位", minWidth: 140 },
  { prop: "projectName", label: titles.projectName, minWidth: 140 },
  { prop: "inspectWait", label: titles.inspectWait, minWidth: 110 },
  { prop: "inspectTotal", label: titles.inspectTotal, minWidth: 110 },
  { prop: "inspectNormal", label: titles.inspectNormal, minWidth: 110 },
  { prop: "inspectErro", label: titles.inspectErro, minWidth: 110 }
];
onMounted(() => {
  getTableList();
});
// 获取列表数据
const getTableList = () => {
  getList().then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};

const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
</script>
<style lang="scss" scoped></style>
